<script lang="ts" setup>
import { ref, type Ref } from 'vue'
import Form, { type formValueItem } from '@/components/Form.vue'
import { useModal } from '@/hooks'

// 使用useModal函数式编程
const isShow = ref(false)
const { modalRef: editRef, show, hide } = useModal(isShow)

const { msg } = defineProps(['msg'])
console.log(msg)

const emit = defineEmits(['editSubmit'])
const formValue = ref({
  username: '',
  password: '',
  phone: '',
  gender: 0,
  address: '',
  roles: []
}) as Ref<formValueItem>
const change = (val: formValueItem) => {
  formValue.value = val
}
// 获取form暴露的方法
const formRef = ref()
// 清除表单数据
const clearFormValue = () => {
  formRef.value.clearFormValue()
}
const editSubmit = () => {
  // 需要将表单数据传递给父组件
  emit('editSubmit', formValue.value)
}

// show()
// 暴露给父组件
defineExpose({
  show,
  hide,
  clearFormValue
})
</script>
<template>
  <div
    class="modal fade fs-5"
    id="editModal"
    ref="editRef"
    tabindex="-1"
    aria-labelledby="editModal"
    aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title fs-5" id="editModalLabel">{{ msg }}</h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <Form @change="change" ref="formRef"></Form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            取消
          </button>
          <button type="button" class="btn btn-primary" @click="editSubmit()">
            确定
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped></style>
